<script setup>
	import { ref } from 'vue'
	import { Delete, Edit } from '@element-plus/icons-vue'
	import ChannelSelect from './components/ChannelSelect.vue'
	import { artDelService, artGetListService } from '@/api/article'
	import { formatTime } from '@/utils/format'
	import ArticleEdit from './components/ArticleEdit.vue'
	// params
	const params = ref({
		pagenum: 1,
		pagesize: 2,
		cate_id: '',
		state: ''
	})
	// 修改list
	const loading = ref(false)
	const articleList = ref([])
	const total = ref(0)
	// 抽屉
	// const visibleDrawer = ref(false)
	const articleEditRef = ref()

	const getArticleList = async () => {
		loading.value = true
		const res = await artGetListService(params.value)
		// 文章详情
		console.log(res)
		articleList.value = res.data.data
		total.value = res.data.total
		loading.value = false
	}
	getArticleList()

	const onSizeChange = size => {
		// 切换几个一页，清除当前页数回到第一页
		params.value.pagenum = 1
		params.value.pagesize = size
		getArticleList()
	}
	const onCurrentChange = page => {
		// 切换到第几页
		params.value.pagenum = page
		getArticleList()
	}
	const onSearch = () => {
		// 搜索按钮 回到第一页
		params.value.pagenum = 1
		getArticleList()
	}
	const onReset = () => {
		// 重置按钮
		params.value.pagenum = 1
		params.value.cate_id = ''
		params.value.state = ''

		getArticleList()
	}
	// 抽屉
	const onAddArticle = () => {
		// 新建
		// visibleDrawer.value = true
		articleEditRef.value.open({})
	}
	// 按钮方法
	const onEditArticle = row => {
		// 修改
		articleEditRef.value.open(row)
	}
	const onDeleteArticle = async row => {
		console.log(row)
		await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
			type: 'warning',
			confirmButtonText: '确认',
			cancelButtonText: '取消'
		})
		// 删除逻辑
		await artDelService(row.id)
		ElMessage({ type: 'success', message: '删除成功' })
		getArticleList()
	}
	const onSuccess = type => {
		if (type === 'add') {
			// 跳转最后一页，并渲染
			const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
			params.value.pagenum = lastPage
		}
		getArticleList()
	}
</script>
<template>
	<page-container title="文章管理">
		<template #extra>
			<el-button type="primary" @click="onAddArticle">发布文章</el-button>
		</template>
		<!-- 表单 -->
		<el-form inline>
			<el-form-item label="文章分类">
				<!-- select组件 -->
				<channel-select v-model="params.cate_id"></channel-select>
			</el-form-item>
			<el-form-item label="发布状态">
				<el-select
					placeholder="请选择文章状态"
					size="large"
					style="width: 240px"
					v-model="params.state"
				>
					<el-option label="已发布" value="已发布"> </el-option>
					<el-option label="草稿" value="草稿"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="onSearch" type="primary">搜索</el-button>
				<el-button @click="onReset">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<el-table v-loading="loading" :data="articleList" style="width: 100%">
			<el-table-column label="文章标题" prop="title" width="400">
				<!-- 作用域插槽  -->
				<template #default="{ row }">
					<el-link type="primary" :underline="false">{{ row.title }}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="分类" prop="cate_name"> </el-table-column>
			<el-table-column label="发表时间" prop="pub_date">
				<template #default="{ row }">
					<!--  -->
					{{ formatTime(row.pub_date) }}
				</template>
			</el-table-column>
			<el-table-column label="状态" prop="state"> </el-table-column>
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button
						@click="onEditArticle(row)"
						type="primary"
						:icon="Edit"
						circle
						plain
					></el-button>
					<el-button
						@click="onDeleteArticle(row)"
						type="danger"
						:icon="Delete"
						circle
						plain
					></el-button>
				</template>
			</el-table-column>
			<template #empty>
				<el-empty description="没有数据" />
			</template>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-model:current-page="params.pagenum"
			v-model:page-size="params.pagesize"
			:page-sizes="[2, 3, 4, 5, 10]"
			layout="jumper, total, sizes, prev, pager, next"
			background
			:total="total"
			@size-change="onSizeChange"
			@current-change="onCurrentChange"
			style="margin-top: 20px; justify-content: flex-end"
		/>
		<article-edit ref="articleEditRef" @success="onSuccess"></article-edit>
	</page-container>
</template>
